<template>
  <a-modal
    :visible="visible"
    :footer="null"
    centered
    :width="420"
    @cancel="onClose"
    :bodyStyle="{
      overFlow: 'hidden',
      padding: 0,
    }"
  >
    <div class="modal-content">
      <div class="text-center title">手机扫码关注微信公众号</div>
      <img :src="qrCode" alt="" class="qr-code" v-if="qrCode" />
      <div class="tip text-center">
        扫码关注微信公众号，随时随地通过手机问AI
      </div>
    </div>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  h,
  onBeforeUnmount,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { WechatOutlined } from "@ant-design/icons-vue";
let qrCodeTimer = null;
export default defineComponent({
  name: "LoginModal",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      qrCode: "",
    });

    const onClose = () => {
      context.emit("onClose");
    };

    const init = () => {
      request
        .get("/third", "/user/org/wechat", { hideErrMsg: true })
        .then((res) => {
          if (res.detail) {
            state.qrCode = res.detail.wechat_qrcode;
          }
        }).
        catch((err) => {
          console.log(err);
        })
        .finally(() => {
          context.emit("getResult", state.qrCode);
        });
    };

    init();

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          clearInterval(qrCodeTimer);
          qrCodeTimer = null;
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
    };
  },
});
</script>

<style lang="less" scoped>
.modal-content {
  padding: 40px;
  position: relative;

  .title {
    font-size: 20px;
    font-weight: 600;
  }

  .qr-code {
    width: 180px;
    height: 180px;
    object-fit: cover;
    display: block;
    margin: 50px auto;
  }

  .tip {
    color: #666;
  }
}
</style>
